const oriColors = ["red", "#0066ff", "#7cffb2", "#fddd60", "#6fb6f5"];
const empColors = ["#EE6666", "#58d9f9", "#05c091", "#ff8a45"];
export const range = {
    ph: [6.58, 8.5], //正常的湖泊与河流,ph值约6.5到8.5
    temperature: [5, 30], //水热污染的超标范围：33度
    turbidity: 2000, //浊度一般不超过3000
    illumination: 3000,//光照强度不超过3000
    TDS: 500,//饮用自来水tds一般不超过500
}
export const chartsOption = {
    color: oriColors,
    title: {
        //标题
        text: "水质数据表",
        subtext: "Real time water quality detection",
        top: 10,
        left: 10,
    },
    legend: {
        //可以通过点击图例控制哪些系列不显示
        data: ["水温", "PH值", "水浊度", "光照强度", "TDS"],
        top: 15,
    },
    tooltip: {
        //鼠标经过的显示
        trigger: "axis",
        axisPointer: { type: "cross" },
    },
    grid: {
        //整个视图的位置
        right: "28%",
        left: "8%",
        top: 100,
    },
    dataZoom: [
        //区域缩放
        { type: "inside" }, //允许鼠标拖动和缩放
        { type: "slider" }, //允许条形数据区域的交互
    ],
    toolbox: {
        //右上角的操作窗口
        feature: {
            dataView: { show: true, title: "数据视图" },
            saveAsImage: { show: true, title: "保存为图片" },
            myThreshold: {
                show: true,
                title: '阈值设置',
                icon: 'path://M603.672 604.506c49.985-49.985 49.985-131.027 0-181.012-49.985-49.985-417.904-236.898-417.904-236.898s186.907 367.925 236.892 417.91 131.027 49.985 181.012 0z M512 46.546h-46.545v209.469c0 12.845 10.413 23.259 23.259 23.259h0.028c12.845 0 23.259-10.413 23.259-23.259V93.091c56.573 0 111.429 11.07 163.044 32.901 49.878 21.097 94.682 51.308 133.169 89.795 38.487 38.487 68.698 83.292 89.795 133.169 21.831 51.615 32.9 106.471 32.9 163.044 0 56.573-11.07 111.429-32.901 163.044-21.097 49.878-51.308 94.682-89.795 133.169-38.487 38.487-83.292 68.698-133.169 89.795C623.429 919.84 568.573 930.909 512 930.909s-111.429-11.07-163.044-32.901c-49.878-21.097-94.682-51.308-133.169-89.795-38.487-38.487-68.698-83.292-89.795-133.169C104.16 623.429 93.091 568.573 93.091 512c0-32.907 3.748-65.232 11.179-96.677 2.842-12.026-4.227-24.171-16.085-27.65-12.793-3.753-26.126 3.991-29.19 16.966-8.139 34.465-12.45 70.409-12.45 107.36 0 257.063 208.391 465.454 465.453 465.454 257.059 0.001 465.456-208.397 465.456-465.456 0-257.061-208.391-465.451-465.454-465.451z',
            },
        },
        top: 15,
        right: 20,
    },
    xAxis: [
        //x轴设置
        {
            data: [],
            type: "category", //坐标轴类型:类目形
            axisTick: { alignWithLabel: false },
            axisPointer: { type: "shadow" },
        },
    ],
    // 用数据映射表示水温与ph值的报警显示
    visualMap: [
        //超过指定范围样式改变
        {
            type: "piecewise",
            show: false,
            dimension: 1,
            seriesIndex: 0,
            pieces: [
                {
                    min: range.temperature[0],
                    max: range.temperature[1],
                    color: empColors[0],
                },
            ],
            outOfRange: {
                color: oriColors[0],
            },
        },
        {
            type: "piecewise",
            show: false,
            dimension: 1,
            seriesIndex: 1,
            pieces: [
                {
                    min: range.ph[0],
                    max: range.ph[1],
                    color: empColors[1],
                },
            ],
            outOfRange: {
                color: oriColors[1],
            },
        },
    ],
    yAxis: [
        //Y轴设置
        {
            type: "value",
            name: "水温",
            position: "left",
            offset: 20,
            max: 50,
            // alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: oriColors[0],
                },
            },
            axisLabel: {
                formatter: "{value} °C",
            },
        },
        {
            type: "value",
            name: "PH值",
            max: 10,
            min: 4,
            interval: 0.5,
            offset: 20,
            position: "right",
            // alignTicks: true,//自动刻度对齐
            axisLine: {
                show: true,
                lineStyle: {
                    color: oriColors[1],
                },
            },
            axisLabel: {
                formatter: "{value}",
            },
        },
        {
            type: "value",
            name: "水浊度",
            position: "right",
            alignTicks: true,
            offset: 65,
            axisLine: {
                show: true,
                lineStyle: {
                    color: oriColors[2],
                },
            },
            axisLabel: {
                formatter: "{value} FTU",
            },
        },
        {
            type: "value",
            name: "光照强度",
            position: "right",
            alignTicks: true,
            offset: 140,
            axisLine: {
                show: true,
                lineStyle: {
                    color: oriColors[3],
                },
            },
            axisLabel: {
                formatter: "{value} Lux",
            },
        },
        {
            type: "value",
            name: "TDS",
            position: "right",
            offset: 210,
            max: 500,
            min: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    color: oriColors[4],
                },
            },
            axisLabel: {
                formatter: function (value) {
                    return `${Math.round(value)} mg/L`;
                }
            },
        },
    ],
    series: [
        //数据设定
        {
            name: "水温",
            type: "line",
            smooth: true,
            symbolSize: 5,
            lineStyle: { width: 3 },
            yAxisIndex: 0,
            data: [],
        },
        {
            name: "PH值",
            type: "line",
            smooth: true,
            symbolSize: 5,
            lineStyle: { width: 3 },
            yAxisIndex: 1,
            data: [],
        },
        {
            name: "水浊度",
            type: "bar",
            yAxisIndex: 2,
            data: [],
            label: {
                show: true,
                position: "top",
                lineHeight: 20,
                borderType: "solid",
                borderColor: "#fff",
                borderWidth: 2,
                backgroundColor: oriColors[2],
                formatter: (params) => {
                    if (params.data > range.turbidity) {
                        return `{icon|}{pad|数值异常}`;
                    } else {
                        return "";
                    }
                },
                rich: {
                    icon: {
                        height: 20,
                        backgroundColor: {
                            image: "assets/images/icon/dataWarn1.svg",
                        },
                    },
                    pad: {
                        padding: [8, 5, 5, 5],
                        color: "red",
                    },
                },
            },
        },
        {
            name: "光照强度",
            type: "bar",
            yAxisIndex: 3,
            data: [],
            label: {
                show: true,
                position: "top",
                lineHeight: 20,
                borderType: "solid",
                borderColor: "#fff",
                borderWidth: 2,
                backgroundColor: oriColors[3],
                formatter: (params) => {
                    if (params.data > range.illumination) {
                        return `{icon|}{pad|数值异常}`;
                    } else {
                        return "";
                    }
                },
                rich: {
                    icon: {
                        height: 20,
                        backgroundColor: {
                            image: "assets/images/icon/dataWarn2.svg",
                        },
                    },
                    pad: {
                        padding: [8, 5, 5, 5],
                        color: "red",
                    },
                },
            },
        },
        {
            name: "TDS",
            type: "bar",
            yAxisIndex: 4,
            data: [],
        },
    ],
};